<template>
    <div>
         <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品分类</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="box-card">
             <el-row>
                <el-col>
                    <el-button type="primary" @click="addCate">添加分类</el-button>
                </el-col>
            </el-row >
            <tree-table class="tree_table" :data="catelist" :columns="columns" border :show-row-hover="false" show-index index-text="#" :selection-type="false" :expand-type="false">
                <template slot="deleted" slot-scope="scope">
                    <i class="el-icon-success" style="color:#67C23A" v-if="!scope.row.cat_deleted"></i>
                    <i class="el-icon-error" style="color:red" v-else></i>
                </template>
                 <template slot="level" slot-scope="scope">
                   <el-tag size="mini" v-if="scope.row.cat_pid === 0">一级</el-tag>
                   <el-tag size="mini" type="success" v-else-if="scope.row.cat_pid === 1">二级</el-tag>
                   <el-tag size="mini" type="warning" v-else>三级</el-tag>
                </template>
                <template slot="opt">
                    <el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
                    <el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
                </template>
            </tree-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryInfo.pagenum"
                :page-sizes="[2, 5, 10, 15]"
                :page-size="queryInfo.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </el-card>
        <!-- 添加分类 -->
        <el-dialog title="添加分类" :visible.sync="addDialogFormVisible" @close="cateClose">
            <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px">
                <el-form-item label="分类名称" prop="cat_name">
                    <el-input v-model="addForm.cat_name"></el-input>
                </el-form-item>
                <el-form-item label="父级分类: ">
                    <el-cascader
                    v-model="selectedKeys"
                    :options="parentList"
                    :props="cascaderProp"
                    @change="handleChange"
                    clearable>
                    </el-cascader>
                </el-form-item>
            </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="addDialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addCateList">确 定</el-button>
        </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            catelist:[],
            queryInfo:{
                type:'',
                pagenum:1,
                pagesize:5
            },
            total:0,
            columns:[
                {
                    label: '分类名称',
                    prop: 'cat_name',
                },
                {
                    label: '是否有效',
                    prop: 'cat_deleted',
                    type: 'template',
                    template: 'deleted',
                }, 
                {
                    label: '排序',
                    prop: 'cat_level',
                    type: 'template',
                    template: 'level',
                },
                 {
                    label: '操作',
                    type: 'template',
                    template: 'opt',
                }
            ],
            addDialogFormVisible:false,
            addForm:{
                cat_name:'',
                cat_pid: 0,
                cat_level: 0
            },
            addFormRules:{
                cat_name:[
                    {required: true, message: '请输入分类名称', trigger: 'blur'}
                ]
            },
            parentList:[],
            cascaderProp:{
                value: 'cat_id',
                label: 'cat_name',
                children: 'children',
                checkStrictly: true,
                expandTrigger: 'hover'
            },
            selectedKeys: []
        }
    },
    created() {
        this.getCateList()
    },
    methods: {
       async getCateList(){
           const {data:res} = await this.$http.get('categories',{params:this.queryInfo})
           if (res.meta.status !== 200) {     return this.$message.error('获取商品分类失败！')   } 
           this.catelist = res.data.result
           this.total = res.data.total
        },
        handleSizeChange(newSize){
            this.queryInfo.pagesize = newSize
            this.getCateList()
        },
        handleCurrentChange(newNum){
            this.queryInfo.pagenum = newNum
            this.getCateList()
        },
        addCate(){
            this.getParentList()
            this.addDialogFormVisible = true
        },
        async getParentList(){
           const {data:res} = await this.$http.get('categories',{params:{type:2}})
           if (res.meta.status !== 200) {     return this.$message.error('获取商品分类列表失败！')   } 
           this.parentList=res.data
        },
        handleChange(){
            if(this.selectedKeys.length > 0){
                this.addForm.cat_pid = this.selectedKeys[this.selectedKeys.length-1]
                this.addForm.cat_level = this.selectedKeys.length
            }else{
                this.addForm.cat_pid = 0
                this.addForm.cat_level = 0
            }
        },
        addCateList(){
            this.$refs.addFormRef.validate(async valid => {
                const {data:res} = await this.$http.post('categories',this.addForm)
                if (res.meta.status !== 201) {     return this.$message.error('添加商品分类失败！')   } 
                this.getCateList()
                this.addDialogFormVisible = false
                this.$message({
                type: 'success',
                message: '添加商品分类成功!'
                });
            })
        },
        cateClose(){
            this.$refs.addFormRef.resetFields()
            this.selectedKeys = []
            this.addForm.cat_pid = 0
            this.addForm.cat_level = 0
        }
    },
}
</script>

<style lang="less" scoped>
    .tree_table{
        margin-top: 15px;
    }
    .el-cascader{
        width: 100%;
    }
</style>